<template>
    <div>
        <div class="more-about-teammate" v-for="(v,i) in matchList" :key="i"
             :class="[{'fourth-teammate':i===3},{'top-three-teammate':i<3}]">
            <div class="teammate-info">
                    <span class="teammate-info-img ma-header-img">
                        <img :src="v[ATTR_NAME.friendImgUrl]" alt="">
                    </span>
                {{v[ATTR_NAME.friendName]}}
            </div>
            <!--为了保持不同屏幕都差不多在中间的感觉-->
            <div class="teammate-result-wrapper">
                <div class="teammate-type">{{v[ATTR_NAME.matchTypeName]}}</div>
                <div class="teammate-matching-degree">{{v[ATTR_NAME.matchDegree]*100+"%"}}</div>
            </div>
            <router-link to="#" tag="div" class="teammate-link-btn"></router-link>
        </div>
    </div>
</template>

<script>
    const ATTR_NAME = {
        matchTypeName: "matchTypeName",
        friendName: "friendName",
        friendImgUrl: "friendImgUrl",
        matchDegree: "matchDegree"
    };
    export default {
        name: "TeammateBar",
        props: {
            matchList: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {
                ATTR_NAME
            }
        }
    }
</script>

<style>
    /* Source TeammateBar.vue */
    /*队友bar栏 START*/
    .more-about-teammate {
        position: relative;
        height: 42px;
        line-height: 42px;
        width: 100%;
        background-color: #FCFCFC;
        padding-left: 105px;
        margin-bottom: 2px;
    }

    .more-about-teammate.top-three-teammate {
        background-color: rgba(198, 198, 198, 0.15);
    }

    .more-about-teammate.fourth-teammate {
        margin-top: 28px;
    }

    .teammate-info {
        position: absolute;
        height: 42px;
        width: 80px;
        left: 25px;
        top: 0;
        text-align: right;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }


    .teammate-info-img {
        float: left;
        margin-top: 6px;
        margin-right: 5px;
        text-align: center;
    }

    .teammate-info-img img {
        width: 80%;
        height: 80%;
    }

    .teammate-result-wrapper {
        height: 42px;
        width: 80%;
        margin: 0 auto;
        padding-right: 20%;
    }

    .teammate-type {
        float: left;
    }

    .teammate-matching-degree {
        float: right;
    }

    .teammate-link-btn {
        position: absolute;
        background: #3bcdf8;
        background: url("../../../../assets/images/iconfont/right.svg") center no-repeat;
        background-size: contain;
        right: 10px;
        top: 0;
        height: 42px;
        width: 20px;
    }
    /*队友bar栏 END*/

</style>
